import { useState, useEffect } from 'react'
import { Image, Rate, Badge, Calendar, Popover, Button, Popconfirm, message } from 'antd';
import { LeftOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import './index.css'
import { getinfo } from '../../plugins/getlogin'
import { useNavigate } from 'react-router-dom';
export const My = () => {
    const [aritle, setaritle] = useState([]);
    const [img, setimg] = useState('');
    const router = useNavigate()
    useEffect(() => {
        getinfo().then(e => {
            setaritle(e.data[0])
            setimg(e.data[1])

        })



    }, []);

    const backartile = () => {
        router('/main')
    }
    //----------------------------------------------------------------
    const getListData = (value) => {
        let listData;
        switch (value.date()) {
            case 8:
                listData = [
                    {
                        type: 'warning',
                        content: '①raact高阶函数未学习完',
                    },
                    {
                        type: 'success',
                        content: '②后台管理功能已经完善',
                    },
                ];
                break;
            case 10:
                listData = [
                    {
                        type: 'warning',
                        content: '①算法题功能还未完善',
                    },
                    {
                        type: 'success',
                        content: '②登录组件功能已完成',
                    },
                    {
                        type: 'error',
                        content: '③数据库连接尚未完成',
                    },
                ];
                break;
            case 15:
                listData = [
                    {
                        type: 'warning',
                        content: '①今天要学习react高阶函数！',
                    },
                    {
                        type: 'success',
                        content: '②uniapp学习完毕',
                    },
                    {
                        type: 'error',
                        content: '③每日算法题今天没做 ',
                    },

                ];
                break;
            default:
        }
        return listData || [];
    };
    const getMonthData = (value) => {
        if (value.month() === 8) {
            return 1394;
        }
    };
    const monthCellRender = (value) => {
        const num = getMonthData(value);
        return num ? (
            <div className="notes-month">
                <section>{num}</section>
                <span>Backlog number</span>
            </div>
        ) : null;
    };
    const dateCellRender = (value) => {
        const listData = getListData(value);
        return (
            <ul className="events">
                {listData.map((item) => (
                    <li key={item.content}>
                        <Badge status={item.type} text={item.content} />
                    </li>
                ))}
            </ul>
        );
    };

    const [list, setlist] = useState([]);
    const onSelect = (date) => {
        const info = getListData(date);
        var time = info.map(item => {
            return item.content
        })
        setlist(time)
        setOpen(true);
    }
    //----------------------------------------------------------------------------------------
    //浮层展示
    const [open, setOpen] = useState(false);
    const hide = () => {
        setOpen(false);
    };
    const handleOpenChange = (newOpen) => {
        setOpen(newOpen);
    };
    const sure = () => {
        message.success('退出成功！')
        localStorage.removeItem('TOKEN')
        router('/')

    }
    return (
        <div>

            <div className='detal'>
                <LeftOutlined onClick={backartile} style={{ fontSize: '2rem' }} />

            </div>

            <div className='aritles'>
                <div className='headers'>
                    <Image
                        width={60}
                        src={img.img}
                    />
                    <div className='rights'>用户名称:{aritle.username} </div>
                    <div>关注热度:<Rate disabled defaultValue={3} /></div>
                </div>
                <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} onSelect={onSelect} />


                <Popover
                    content={<a onClick={hide}>关闭</a>}
                    title={list}
                    trigger="click"
                    open={open}
                    onOpenChange={handleOpenChange}
                >
                </Popover>
            </div>

            <div className='footers'>

                <Popconfirm
                    title="你确定退出登录吗？"
                    cancelText='取消'
                    okText='确认'
                    onConfirm={sure}
                    icon={
                        <QuestionCircleOutlined
                            style={{
                                color: 'red',
                            }}
                        />
                    }
                >
                    <Button type="primary" block>
                        退出
                    </Button>
                </Popconfirm>
            </div>
        </div >
    )
}